<template>
  <q-dialog class="dialog" v-model="show" persistent>
    <q-card v-drag style="min-width: 1000px;min-height: 675px">
      <!-- dialog title -->
      <q-card-section class="dialog-title bg-primary">
        <div class="text-center text-white">关联单号</div>
        <q-btn
          style="font-size: 18px;color: white"
          flat
          round
          dense
          class="iconfont icontubiao-67 close-btn dialog"
          @click="hideDialog"
        >
        </q-btn>
      </q-card-section>

      <!-- 步骤指示条 -->
      <steps
        v-if="!step"
        :value="currentStep"
        :controllerType="orderType === 1 ? '8' : '9'"
        style="margin-top: 20px"
      />

      <!-- 新建网关 -->
      <repair-order
        v-if="currentStep === 1 && orderType === 1"
        @successSubmit="successNewRepair"
        :orderType="orderType"
        @hideDialog="hideDialog"
      />
      <maintenance-order-apply
        v-if="currentStep === 1 && orderType === 2"
        @successSubmit="successNewRepair"
        :orderType="orderType"
        @hideDialog="hideDialog"
      />
      <part-order
        v-if="currentStep === 2"
        :orderType="orderType"
        :orderId="orderId"
        :selData="selData"
        @successSubmit="successNewPart"
        @hideDialog="hideDialog"
        @close="preStep"
        :isMultiple="false"
      />
    </q-card>
  </q-dialog>
</template>

<script>
import Steps from 'src/pages/miot/components/list-components/gateway-dialog/steps'
import RepairOrder from './repair-order'
import PartOrder from './part-order'
import MaintenanceOrderApply from './maintenance-order'

export default {
  name: 'associated-order-dialog',
  components: {
    MaintenanceOrderApply,
    PartOrder,
    RepairOrder,
    Steps
  },
  props: {
    controllerType: {
      type: String,
      default: ''
    },
    step: {
      type: Number,
      default: 0
    },
    selData: Array,
    orderType: Number // 1：维修工单 2：保养工单
  },
  data () {
    return {
      show: false, // 弹框的显示与隐藏
      currentStep: 1,
      orderId: '',
      orderNumber: ''
    }
  },
  computed: {},
  watch: {
    show (val) {
      if (val) {
        this.initData()
      } else {
        this.$emit('close')
      }
    },
    step (val) {
      if (val) {
        this.currentStep = val
      }
    },
    detailDriverParams: {
      deep: true,
      immediate: true,
      handler (val) {
        if (val) {
        }
      }
    }
  },
  methods: {
    initData () {
      if (this.step) {
        this.currentStep = this.step
      } else {
        this.currentStep = 1
      }
    },

    // 显示弹框
    showDialog () {
      this.show = true
    },

    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    successNewRepair (val) {
      this.orderId = val.id
      this.orderNumber = val.repairOrder || val.orderNo
      this.currentStep = 2
    },
    successNewPart (val) {
      console.log(val)
      this.$emit('successAll', val, this.orderNumber, this.orderId)
      this.show = false
    },
    // 上一步
    preStep () {
      this.currentStep--
    }
  }
}
</script>

<style scoped lang="stylus"></style>
